import type { Metadata } from "next";
import Link from "next/link";
import { Kv, Page, PageHeader } from "@/components/ui/section";
import { StatusBadge } from "@/components/ui/status-badge";
import { api } from "@/lib/api";
import { EVENT_TYPE_LABEL, formatDateTime, instrumentHref } from "@/lib/format";
import type { MarketEvent } from "@/lib/types";

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;
  try {
    const e = await api<MarketEvent>(`/v1/events/${encodeURIComponent(id)}`);
    return { title: e.title, description: e.summary ?? `${EVENT_TYPE_LABEL[e.type] ?? e.type} event recorded by Market Atlas.`, alternates: { canonical: `/events/${e.id}` }, robots: { index: false } };
  } catch {
    return { title: "Event" };
  }
}

export default async function EventPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const e = await api<MarketEvent>(`/v1/events/${encodeURIComponent(id)}`);
  const url = typeof e.data.url === "string" ? (e.data.url as string) : null;
  return (
    <Page>
      <PageHeader
        kicker={
          <Link href={`/events?type=${e.type}`} className="hover:text-ink">
            Events · {EVENT_TYPE_LABEL[e.type] ?? e.type}
          </Link>
        }
        title={e.title}
        lead={e.summary ?? undefined}
        actions={<StatusBadge status={e.severity} />}
      />
      <div className="grid grid-cols-1 [&>*]:min-w-0 gap-6 lg:grid-cols-[1fr_320px]">
        <div className="rounded-md border border-rule bg-surface p-4">
          <h2 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Event data</h2>
          <Kv
            cols={1}
            className="mt-2"
            items={Object.entries(e.data)
              .filter(([, v]) => v != null && typeof v !== "object")
              .map(([k, v]) => [k.replace(/_/g, " "), String(v)] as [string, string])}
          />
          {Object.values(e.data).some((v) => v && typeof v === "object") && <pre className="mono mt-3 overflow-x-auto rounded bg-surface-2 p-3 text-xs">{JSON.stringify(Object.fromEntries(Object.entries(e.data).filter(([, v]) => v && typeof v === "object")), null, 2)}</pre>}
          {url && (
            <a href={url} target="_blank" rel="noopener noreferrer" className="mt-3 inline-block text-sm text-accent hover:underline">
              Open source document ↗
            </a>
          )}
        </div>
        <aside className="space-y-4">
          <div className="rounded-md border border-rule bg-surface p-4">
            <h2 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Provenance</h2>
            <Kv cols={1} className="mt-2" items={[["Time", formatDateTime(e.timestamp, { seconds: true })], ["Confidence", `${Math.round(e.confidence * 100)}%`], ["Independent sources", String(e.source_count)], ["Confirmed", e.confirmed_at ? formatDateTime(e.confirmed_at, { seconds: true }) : "single observation"], ["Event id", e.id]]} />
            <div className="mt-2 flex flex-wrap gap-1.5">
              {e.sources.map((s) => (
                <Link key={s} href={`/sources#${s}`} className="mono rounded border border-rule px-1.5 py-0.5 text-xs text-ink-2 hover:border-rule-strong">
                  {s}
                </Link>
              ))}
            </div>
          </div>
          {e.instruments.length > 0 && (
            <div className="rounded-md border border-rule bg-surface p-4">
              <h2 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Instruments</h2>
              <ul className="mt-2 divide-y divide-rule text-sm">
                {e.instruments.map((i) => (
                  <li key={i.id} className="py-1.5">
                    <Link href={instrumentHref(i.id)} className="hover:underline">
                      <span className="mono font-medium">{i.symbol ?? i.id}</span> {i.name && <span className="text-xs text-ink-3">{i.name}</span>}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </aside>
      </div>
    </Page>
  );
}